<template>
  <view :class="classArr">
    <view
      v-if="modelData.showCaption"
      :class="[ns.b('header')]"
      @click="changeCollapse"
    >
      <view :class="[ns.be('header', 'left')]">
        <view :class="[ns.e('caption'), ...controller.labelClass]">{{
          captionText
        }}</view>
      </view>
      <view :class="[ns.be('header', 'right')]">
        <uni-icons
          v-if="
            modelData.titleBarCloseMode !== undefined &&
            modelData.titleBarCloseMode !== 0
          "
          :type="isCollapse ? 'right' : 'down'"
          size="18"
        ></uni-icons>
      </view>
    </view>
    <view :class="[ns.b('content')]">
      <i-biz-row :layout="modelData.layout">
        <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
          <i-biz-col
            :layoutPos="panelItem.layoutPos"
            :state="container.panelItems[panelItem.id].state"
          >
            <i-biz-panel-detail-shell
              :modelData="panelItem"
              :container="container"
              :controls="controls"
            />
          </i-biz-col>
        </template>
      </i-biz-row>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { IControl, IPanelContainer } from "@ibiz/model-core";
import { computed, PropType, ref } from "vue";
import { PanelContainerGroupController } from "./i-biz-panel-container-group.controller";

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controller: {
    type: PanelContainerGroupController,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});

const ns = useNamespace("panel-container-group");

const isCollapse = ref(!props.controller.defaultExpansion);

const changeCollapse = (): void => {
  if (!props.controller.disableClose) {
    isCollapse.value = !isCollapse.value;
  }
};

const captionText = computed(() => {
  const { captionItemName, caption, capLanguageRes } = props.modelData;
  if (captionItemName) {
    return props.controller.data[captionItemName];
  }
  let text = caption;
  if (capLanguageRes) {
    text = ibiz.i18n.t(capLanguageRes.lanResTag!, caption);
  }
  return text;
});

const classArr = computed(() => {
  const classNames = [ns.b(), ns.m(props.modelData.id)];
  if (props.controller) {
    classNames.push(
      ...props.controller.containerClass,
      ns.is("hidden", props.controller.state && !props.controller.state.visible)
    );
  }
  if (props.modelData.showCaption === true) {
    classNames.push(ns.m("show-header"));
    classNames.push(ns.b("collapse"));
    classNames.push(ns.is("collapse", isCollapse.value));
    if (props.controller && props.controller.disableClose) {
      classNames.push(ns.bm("collapse", "disable-close"));
    }
  }
  return classNames;
});
</script>
<style lang="scss">
@import "./i-biz-panel-container-group.scss";
</style>
